<template>
  <div  ref="barsone" class="bars"></div>
</template>

<script>
export default {
    
    props:{
        per:{
            type:Array
        },
    },
 mounted(){
    this.drawEcharts();
    },
    methods: {
        // fetchData() {
        //     getWEBCount().then((res)=>{
        //         this.datanums=res.data.result.datanums;
        //         this.linesdataset=res.data.result.linesdataset;
        //     });
        // },
        drawEcharts(){
            let barsone =this.$echarts.init(this.$refs.barsone)
            barsone.setOption({
                dataset: {
                    source: this.per
                },
                grid:{
                    top:30,
                    bottom:20,
                    left:26,
                    width: 872,
                    height: 280,
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#a3d7ff',
                            fontSize: 14
                        },
                        splitLine: {
                            lineStyle: {
                                width: 2.5,
                                color:'#50acfe'
                            }
                        }
                },
                xAxis: {
                    type: 'category',
                    // data: ['太牛', 'CRM', '产品中心', '大数据', '鲲鹏', '聚源/万德资讯', 'OA','QDII', '云凌/钱龙行情', '红珊瑚'],
                    axisLine: {
                                        show: false
                                    },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    color: '#ffffff',
                                    fontSize: 14,
                                    interval:0
                                },
                },
                series: [
                    {
                        // name: '直接访问',
                        type: 'bar',
                        stack: '总量',
                        barWidth: 36,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: '#0282d3'},
                                    {offset: 0.5, color: '#4ba2eb'},
                                    {offset: 0, color: '#6baff5'}
                                ]
                            )
                        },
                        seriesLayoutBy: 'row'
                        // data: [30, 28, 26, 27, 28, 26, 27, 18, 15, 14]
                    },
                    {
                        // name: '邮件营销',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: '#a9a254'},
                                    {offset: 0.5, color: '#afa64c'},
                                    {offset: 0, color: '#b4aa44'}
                                ]
                            )
                        },
                        seriesLayoutBy: 'row'
                        // data: [8, 7, 7, 6, 7, 7, 6, 4, 4, 3]
                    },
                    {
                        // name: '联盟广告',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: '#c5903d'},
                                    {offset: 0.5, color: '#d69838'},
                                    {offset: 0, color: '#e6a033'}
                                ]
                            ),
                        },
                        seriesLayoutBy: 'row'
                        // data: [5, 4, 5, 4, 4, 5, 4, 3, 2, 3]
                    },
                    {
                        // name: '视频广告',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: '#ce4b4b'},
                                    {offset: 0, color: '#e62f2f'}
                                ]
                            )
                        },
                        seriesLayoutBy: 'row'
                        // data: [3, 2, 3, 3, 3, 3, 2, 2, 1, 1]
                    }
                ]
            })
        }
    }
}
</script>

<style>
.bars {
    /* width: 800px;
    height: 350px; */
    width: 871px;
    height: 331px;
    margin-top: 22px;
}
</style>